﻿@page "/tree-grid/sorting"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_shipmentdata
@*End:Hidden*@

<SampleDescription>
    <p> This sample demonstrates the Tree Grid multi sorting feature. To sort two or more columns, hold the CTRL key and click the column header.</p>
</SampleDescription>
<ActionDescription>
   <p>Sorting feature enables us to order the data in a particular direction. It can be enabled by setting the <code>AllowSorting</code> as true.</p>
   <p class='e-grid' style='border:none'>Sort a Tree Grid column by simply clicking the column header. The icons <span class='e-icons e-icon-ascending'></span>(ascending)
      and <span class='e-icons e-icon-descending'></span>(descending) specifies the sort direction of a column.</p>
      <p>By default, multi-sorting is enabled in Tree Grid, to sort multiple column hold <strong>CTRL</strong> key and click the column
      header. To clear sort for a column, hold <strong>SHIFT</strong> key and click the column header.</p>
    <p>While using Tree Grid in a touch device, you have an option for multi sorting in single tap on the Tree Grid header. By tapping on the Tree Grid header, it will show the toggle button in small popup with sort icon.
     Now, tap the button to enable the multi-sorting in single tap.</p>
    <p>In this demo, </p>
    <ul><li>Simply click the column header to sort a column.</li> </ul>
    <p>More information on the sorting can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/sorting/'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid DataSource="@TreeGridData" Height="315" IdMapping="ID" ParentIdMapping="ParentID" TreeColumnIndex="0" AllowSorting="true">
                <TreeGridSortSettings>
                    <TreeGridSortColumns>
                        <TreeGridSortColumn Field="Category" Direction="Syncfusion.Blazor.Grids.SortDirection.Ascending"></TreeGridSortColumn>
                        <TreeGridSortColumn Field="Name" Direction="Syncfusion.Blazor.Grids.SortDirection.Ascending"></TreeGridSortColumn>
                    </TreeGridSortColumns>
                </TreeGridSortSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="Name" HeaderText="Order Name" Width="200"></TreeGridColumn>
                    <TreeGridColumn Field="Category" HeaderText="Category" Width="150"></TreeGridColumn>
                    <TreeGridColumn Field="OrderDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="ShippedDate" HeaderText=" Shipped Date" Format="d" Type=ColumnType.Date Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Units" HeaderText="Units" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Price" HeaderText="Price" Format="C0" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>

        </div>
    </div>
</div>

@code{

    public List<ShipmentData> TreeGridData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeGridData = ShipmentData.GetShipmentData().ToList();
    }
}
